<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="./index.css" rel="stylesheet" />
		<script src="../../js/mui.min.js"></script>
		<script >mui.init()</script>
	</head>

	<body>
		<!-- 头部 -->
		<header class="mui-bar mui-bar-nav mui-bar-transparent">
			<span class="mui-icon mui-icon-gear"></span>
			<h1 class="mui-title">Pocket AI</h1>
		</header>
		<!-- 中部内容区域 -->
		<div class="mui-content">
			<ul class="mui-table-view">
				<li data-type="init">
					<!-- 初始化的页面 -->
					<div class="mui-card">
						<!--内容区-->
						<div class="mui-card-content">
							<div><span class="knowledge-left">我的个人知识库</span><span class="knowledge-right">,
									私人AI助理</span></div>
							<p class='knowledge-introduce'>通过分析您的日常文件、笔记、照片，持续构建和优化您的知识体系，让信息整理和获取变得轻松而直观。</p>
							<ul class="mui-table-view">
								<li class="mui-table-view-cell mui-media li-after">
									<a href="javascript:;">
										<img class="mui-media-object mui-pull-left" src="">
										<div class="mui-media-body">
											个人知识库对话
											<p class="mui-ellipsis">根据您的偏好和目的地实时提供个性...</p>
										</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media li-after">
									<a href="javascript:;">
										<img class="mui-media-object mui-pull-left" src="">
										<div class="mui-media-body">
											NAS文件只能查找
											<p class="mui-ellipsis">高效想法总结，将您的思维碎片转化...</p>
										</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media li-after">
									<a href="javascript:;">
										<img class="mui-media-object mui-pull-left" src="">
										<div class="mui-media-body">
											通用AI对话
											<p class="mui-ellipsis">创意图片生成，为您的社交媒体、演...</p>
										</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</li>
				<li data-type="knowledge">
					<div class="mui-card myProblem">
						根据我之前上传的工作资料，概括XX项目的技术方案
					</div>
				</li>
				<li data-type="knowledge">
					<div class="mui-card answer-text">
						轻便便携：设计小巧，便于用户随身携带，适用于各种场景。
						轻便便携：设计小巧，便于用户随身携带，适用于各种场景。
						轻便便携：设计小巧，便于用户随身携带，适用于各种场景。
						轻便便携：设计小巧，便于用户随身携带，适用于各种场景。
						轻便便携：设计小巧，便于用户随身携带，适用于各种场景。
					</div>
					<button type="button" class="mui-btn refreshempty-btn"><span
							class="mui-icon mui-icon-refreshempty"></span>重新生成</button>
				</li>
				<li data-type="knowledge">
					<div class="mui-card myProblem">
						帮我找出与POCKET项目相关的文档
					</div>
				</li>
				<li data-type="knowledge">
					<div class="mui-card">
						<ul class="mui-table-view">
							<p>以下是您最近上传的工作文件：</p>
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;">
									<img class="mui-media-object mui-pull-left" src="">
									<div class="mui-media-body">
										产品需求文档.docx
										<p class="mui-ellipsis"><span>上午11:20</span>&nbsp;&nbsp;<span>1.2MB</span> </p>
									</div>
									<button type="button" class="mui-btn download">下载</button>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;">
									<img class="mui-media-object mui-pull-left" src="">
									<div class="mui-media-body">
										技术方案.pptx
										<p class="mui-ellipsis"><span>上午11:20</span>&nbsp;&nbsp;<span>1.2MB</span> </p>
									</div>
									<button type="button" class="mui-btn download">下载</button>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;">
									<img class="mui-media-object mui-pull-left" src="">
									<div class="mui-media-body">
										UX设计文档.pdf
										<p class="mui-ellipsis"><span>上午11:20</span>&nbsp;&nbsp;<span>1.2MB</span> </p>
									</div>
									<button type="button" class="mui-btn download">下载</button>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a href="javascript:;">
									<img class="mui-media-object mui-pull-left" src="">
									<div class="mui-media-body">
										测试用例.xlsx
										<p class="mui-ellipsis"><span>上午11:20</span>&nbsp;&nbsp;<span>1.2MB</span> </p>
									</div>
									<button type="button" class="mui-btn download">下载</button>
								</a>
							</li>
						</ul>
					</div>
					<button type="button" class="mui-btn refreshempty-btn"><span
							class="mui-icon mui-icon-refreshempty"></span>重新生成</button>
				</li>
				<li data-type="ppt">
					<div class="mui-card myProblem">
						帮我生成一份PPT，主题是：AI技术的发展历程和现状
					</div>
					<div class="waitfor">·····</div>
				</li>
				<li data-type="ppt">
					<div class="mui-card">
						<p class="ppt-prompt">
							我已为您生成了主题为‘AI技术的发展历程和现状’的ppt纲要，请查看以下内容，您可以点击下方编辑纲要，在确定纲要内容后点击‘生成PPT’按钮、选择PPT模版即可下载完整的PPT。
						</p>
						<ul>
							<li data-type="title">
								<div class="ppt-content">PPT标题1：人工智能的发展历程和现状</div>
								<div class="ppt-input"><span class="icon-more">···</span><input type="text"
										class="inputed" /></div>
							</li>
							<li data-type="page">
								<div class="ppt-content indent-1">页面1：人工智能的发展历程和现状</div>
								<div class="ppt-input"><span class="icon-more">···</span><input type="text"
										class="inputed" /></div>
							</li>
							<li data-type="item">
								<div class="ppt-content indent-2">• 人工智能的发展历程和现状</div>
								<div class="ppt-input"><span class="icon-more">···</span><input type="text"
										class="inputed" /></div>
							</li>
							<li data-type="item">
								<div class="ppt-content indent-2">• 人工智能的发展历程和现状</div>
								<div class="ppt-input"><span class="icon-more">···</span><input type="text"
										class="inputed" /></div>
							</li>
							<li data-type="page">
								<div class="ppt-content indent-1">页面2：人工智能的发展历程和现状</div>
								<div class="ppt-input"><span class="icon-more">···</span><input type="text"
										class="inputed" /></div>
							</li>
							<li data-type="page">
								<div class="ppt-content indent-1">页面3：人工智能的发展历程和现状</div>
								<div class="ppt-input"><span class="icon-more">···</span><input type="text"
										class="inputed" /></div>
							</li>
						</ul>
					</div>
				</li>
			</ul>
		</div>
		<!-- 更多 - 弹窗 -->
		<script src="./components/PPTmore.js"></script>
		<!-- 底部tab栏切换 -->
		<nav class="mui-bar mui-bar-tab mui-bar-btn ">
			<div class='active'><span class='mui-icon mui-icon-chatboxes'></span>个人知识库</div>
			<div><span class='mui-icon mui-icon mui-icon-image'></span>PPT生成</div>
			<div><span class='mui-icon mui-icon mui-icon-compose'></span>博客生成</div>
		</nav>
		<!-- 输入框 -->
		<nav class="mui-bar mui-bar-tab mui-bar-input">
			<input type="text" placeholder="请输入问题，可通过 Shift + 回车换行" />
			<div><span class='mui-icon mui-icon-mic' /></div>
			<button type="button" class="mui-btn mui-btn-primary submit"><span
					class="mui-icon mui-icon-paperplane" /></button>
		</nav>
		<!-- 底部菜单栏 -->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active">
				<div class="dp-img"></div>
				<span class="mui-tab-label">NAS文件</span>
			</a>
			<a class="mui-tab-item">
				<div class="dp-img "></div>
				<span class="mui-tab-label">Pocket AI</span>
			</a>
			<a class="mui-tab-item">
				<div class="dp-img"></div>
				<span class="mui-tab-label">我的AI眼镜</span>
			</a> 
		</nav>  
 
		<script type="text/javascript">
			//跳转到设备绑定页面
			mui(".mui-icon-gear")[0].addEventListener('tap', function() {
				mui.openWindow({
					url: '../DeviceBinding/index.html',
					id: "DeviceBinding",
				})
			})
			//底部选项卡高亮处理
			mui('.mui-bar-btn').on('tap', 'div', function() {
				mui('.mui-bar-btn .active')[0]?.classList?.remove("active")
				this.classList.add('active')
			}) 
			//修改框高亮显示并且获取聚焦
			mui('.ppt-prompt~ul').on('click', 'li', function(e) {
				const inputdom = this.querySelector('.ppt-input input')
				const pptdom = this.querySelector('.ppt-input')
				const content = this.querySelector('.ppt-content')
				content.style.display = 'none'
				pptdom.style.display = 'flex' 
				inputdom.value = content.innerText
				inputdom.focus()
				pptdom.focus()
			})
			// 添加修改框失去焦点事件
			mui.each(mui('.ppt-input input'), function(index, item) {
				item.addEventListener('blur', function() {
					const contentdom = this.parentNode.parentNode.querySelector('.ppt-content')
					contentdom.innerText = this.value

				})
			})  

			const blurObj = {
				flag: false,
				dom: null  
			} 
			//处理所有失焦事件
			mui('body')[0].addEventListener('click', (e) => {
				const noBlur=['ppt-input', 'inputed', 'icon-more']
				const yesBlur=['ppt-more-page']
				if (blurObj.flag && !noBlur.includes(e.target.className)) {
					blurObj.dom.parentNode.querySelector('.ppt-input').style.display = 'none'
					blurObj.dom.style.display = 'flex'
					document.querySelector('.ppt-more-page')?.remove()
					blurObj.flag = false
				} 
				if (e.target.className.includes("ppt-content")) {
					blurObj.flag = true
					blurObj.dom = e.target
				}
			})  
		</script>
	</body>

</html>